<template>
    <div class="box1">
        <ul class="tab">
            <!-- <li> <span  @click="tabli=1" :class="{active:tabli==1}">计划决策库</span></li> -->
            <!-- <li><span  @click="tabli=2" :class="{active:tabli==2}">ERP建项列表</span></li> -->
        </ul>
        <div class="show">
            <div v-show="tabli==1">
                <div class="search">
                    <div class="screen">
                       <input placeholder="请输入"/>   <el-button class="searchbtn">搜索</el-button>  <el-button plain id="xuanze" @click="xuanze">高级筛选</el-button>
                       <div class="preparation" v-show="xuan==true">
                           <p>请选择筛选条件</p>
                           <div>
                               <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
    <el-select v-model="valueB" placeholder="请选择">
    <el-option
      v-for="item in optionsB"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>  <el-select v-model="valueC" placeholder="请选择">
    <el-option
      v-for="item in optionsC"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  <div style="width:40px;padding-top: 8px;
    font-size: 20px;">
      <i  class='el-icon-delete'> </i>
  </div>
                           </div>
                           <div>
                               <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
    <el-select v-model="valueB" placeholder="请选择">
    <el-option
      v-for="item in optionsB"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>  <el-select v-model="valueC" placeholder="请选择">
    <el-option
      v-for="item in optionsC"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  <div style="width:40px;padding-top: 8px;
    font-size: 20px;">
      <i  class='el-icon-delete'> </i>
  </div>
                           </div>
                            <div v-if="caixuanB">
                               <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
    <el-select v-model="valueB" placeholder="请选择">
    <el-option
      v-for="item in optionsB"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>  <el-select v-model="valueC" placeholder="请选择">
    <el-option
      v-for="item in optionsC"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  <div style="width:40px;padding-top: 8px;
    font-size: 20px;cursor: pointer;"  @click="caixuanA">
      <i  class='el-icon-delete'> </i>
  </div>
                           </div>
                           <div v-else>
                               <p class="sanxuan" @click="caixuanA"><span>+</span><span>添加筛选项</span></p>
                           </div>
                           <div class="caixuan" > <el-button @click="polling" plain id="xuanze" >查询</el-button> <el-button plain id="xuanze">重置</el-button></div>
                       </div>
                    </div>
                    <div class="searchlist">
                        <div v-for="v in searchlist" :key='v.id'>{{v.name}} <i class="el-icon-close"></i></div>
                        <!-- <div><i class="el-icon-plus"></i></div> -->
                    </div>
                </div>
                <div class="company">
                <div class="classify" id="more1">
                    <span>所属单位:</span>
                    <!-- <span>全部</span> -->
                    <p  @click="moreAA" id="moreAb"><span v-for="(v,i) in companylist" :key="i" :data-name="v.name" :class="{activeA:v.name===Name}">{{v.name}}</span></p>
                    <p @click="moreA">更多<i class="el-icon-arrow-down"></i></p>
                </div>
                 <div class="classify" id="more2">
                    <span>所属专项:</span>
                    <!-- <span>全部</span> -->
                    <p class="ximu" @click="moreBB"><span v-for="(v,i) in speciallist" :key="i" :data-name="v.name" :class="{activeA:v.name===NameB}">{{v.name}}</span></p>
                    <p @click="moreB">更多<i class="el-icon-arrow-down"></i></p>
                </div>
                </div>
                
            </div>
            <!-- <div v-show="tabli==2">222</div> -->
        </div>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                xuan:false,caixuanB:false,
               more1:true, more2:true,
                Name:'全部', NameB:'电网基建',
                tabli:1,
                searchlist:[{id:'aa',name:"预安排"},{id:'bb',name:"续建"},{id:'cc',name:"总部决策"},{id:'dd',name:"省公司决策"},{id:'ff',name:"新建"}],
                companylist:[{id:'aa1',name:'全部'},{id:"1a",name:"国网北京市电力公司"},{id:"2a",name:"国网天津市电力公司"},{id:"3a",name:"国网河北省电力有限公司"},{id:"4a",name:"国网翼北电力有限公司"},{id:"5a",name:"国网山西电力公司"},{id:"1ag",name:"国网山东电力公司"},{id:"2ga",name:"国网上海电力公司"},{id:"3ga",name:"国网江苏电力有限公司"},{id:"4at",name:"国网浙江电力有限公司"},{id:"5ar",name:"国网安徽电力公司"},{id:"5ars",name:"国网福建电力公司"},{id:"5ar5",name:"国网湖北电力公司"},{id:"5a6r",name:"国网湖南电力公司"},{id:"51ar",name:"国网江西电力公司"},{id:"56ar",name:"国网辽宁电力公司"},{id:"5a26r",name:"国网吉林电力公司"},{id:"5a9r",name:"国网黑龙江电力公司"},{id:"598ar",name:"国网蒙东电力公司"},{id:"5a66r",name:"国网陕西电力公司"},{id:"5a69r",name:"国网甘肃电力公司"},{id:"5a655r",name:"国网宁夏电力公司"},{id:"5a36r",name:"国网新疆电力公司"},{id:"591ar",name:"国网四川电力公司"},{id:"5ar97",name:"国网重庆电力公司"},{id:"599ar",name:"国网西藏电力公司"}],
                speciallist:[{id:"ssds0",name:"电网基建"},{id:"ssd0",name:"电网小型基建"},{id:"s3hs0",name:"电力市场营销投入"},{id:"shs0",name:"生产技改"},{id:"ss2e0",name:"产业技改"},{id:"ss2hd0",name:"生产大修"},{id:"svs20",name:"产业大修"},{id:"sse2rh0",name:"零星购置"},{id:"ss2h0",name:"研究开发"},{id:"ssg2h0",name:"电网数字化"},{id:"s2swh0",name:"管理咨询"},{id:"s2sw3h0",name:"教育培训"},{id:"s2s77h0",name:"股权投资"},{id:"s2s66wh0",name:"产业基建"},{id:"s2s99wh0",name:"生产辅助技改"},{id:"11",name:"生产辅助大修"}],
                   options: [{
          value: '1',
          label: '电压等级'
        }, {
          value: '2',
          label: '计划时间'
        }],
         optionsB: [{
          value: '1',
          label: '大于'
        }, {
          value: '2',
          label: '等于'
        },
         {
          value: '3',
          label: '小于'
        }, {
          value: '4',
          label: '不等于'
        }, {
          value: '5',
          label: '大于或等于'
        }, {
          value: '6',
          label: '小于或等于'
        }],
         optionsC: [{
          value: '1',
          label: '110'
        }, {
          value: '2',
          label: '220'
        }, {
          value: '3',
          label: '500'
        }],
        value: '',valueB:'',valueC:''
            }
        },
        methods: {
            xuanze(){
                if(this.xuan){
                    this.xuan=false;

                }else{
                    this.xuan=true;
                }
            },
            moreA(){
                 let more=document.getElementById('more1');
                 let moreb=document.getElementById('more2');
                // console.log("2222")
                 if(this.more1){
                   this.more2=true;
                     this.more1=false;
                    more.style.height="150px";
                      moreb.style.height="0px";
                 }else{
                     this.more1=true;
                     more.style.height="50px"
                     moreb.style.height="50px"
                 }
            },
            moreAA(e){
                //    console.log(e.target.dataset.name)
                //    console.log(e.path[1])
                   this.Name=e.target.dataset.name;
                   this.$emit('moreA',this.Name)
                   let moreAb=document.querySelectorAll('#moreAb span')  
            },
            moreBB(e){
                 this.NameB=e.target.dataset.name;
                 this.$emit('moreB',this.NameB)
            },
            moreB(){
                let more=document.getElementById('more2');
                let morea=document.getElementById('more1');
                // console.log("2222")
                 if(this.more2){
                     this.more1=true;
                     this.more2=false;
                    more.style.height="100px";
                    morea.style.height="50px"
                 }else{
                     this.more2=true;
                     more.style.height="50px"
                 }
            },
            caixuanA(){
                // console.log("6666")
            //    this.caixuan?this.caixuan=true:this.caixuan=false;
            if(this.caixuanB){
                this.caixuanB=false
            }else{
                this.caixuanB=true
            }
            },
            polling(){
                this.xuan=false;
            }
        }
    }
</script>
<style scoped>
.activeA{
    background: #277F7B;color: #fff;
}
*{
    margin:0;
}
li{
    list-style: none;
}

.box1{
    width: 1760px;
height: 255px;
/* background: #c2c2c2; */

/* overflow: hidden; */
background:#fff;
border-radius: 2px;
margin-left: 17px;
}
.tab{
    display: flex;
}
.tab li{
    font-size: 14px;
    line-height: 19px;
    padding: 0 9px;
     cursor: pointer;
     color:#c2c2c2;
    /* border-bottom:solid 3px #FFF; */
}
.active{
    color: #277F7B;
    border-bottom: solid 3px #277F7B;
  
    z-index: 9999;
    /* background: olive; */
}
.show{
    width: 1760px;
    height: 206px;
    background: #fff;
}
.search{
    margin: 0 auto;
    margin-left: 480px;
    /* margin-top: 40px; */
}
.search input{
    width: 480px;
    height: 40px;
    margin-top: 40px;
    border: #ecedf1 1px solid;
   
}

.search input:focus{
  
     outline: #277F7B 2px solid;
}

.searchbtn{
    margin-left: -6px;
    background:#277F7B;
    padding: 14px 20px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
}
#xuanze{
    padding: 14px 20px ;
    color:#277F7B;
     font-size: 16px;
    font-weight: 600;
    border:solid 1px #277F7B;
}

.searchlist{
    display: flex;
    margin-top: 10px;
}
.searchlist div{
    padding: 6px 8px;
    background: #f3f3f3;
    margin-right: 10px;
}
.searchlist div:last-child{
    padding: 6px 30px;
}
.screen{
    position: relative;
}
 input:focus{
   border:soild 2px #277F7B;
}
.preparation{
position: absolute;
width: 540px;
height: 260px;
background: #fffdfd;left: 350px;bottom: -276px;
}
.preparation >p{
    line-height: 50px;
    margin-left: 20px;
}
.preparation>div{
    margin-left: 20px;
    display: flex;
    justify-content: space-between;
    margin-bottom:10px;
}
.preparation>div>div{
    margin-right: 10px;
}
.preparation>div>.sanxuan{
    color: #51c4be;
    height: 20px;
    cursor: pointer;
    line-height: 20px;
}
.preparation>.caixuan{
    display: flex;
    justify-content: flex-end;
    /* background: #ccc; */
}
.sanxuan>span:nth-child(1){
    padding: 0;
    display: inline-block;
  border: solid 1px #51c4be;
  height: 15px;
  line-height: 15px;
  width: 15px;
  font-size: 20px;
  margin-right: 10px;
}

.company{
    width: 1510px;
    height: 100px;
    margin: 0 auto;
    margin-top: 10px;
    /* overflow: hidden; */
}
.company>.classify{
    width: 1510px;
    display: flex;
    height:50px;
    /* min-height: 50px; */
    border: solid 1px dashed;
    /* 所属单位超出隐藏 */
    overflow: hidden;
    /* position: relative; */
    background: #fff;
    z-index: 9999;
}

.classify>span:nth-child(1){
    font-weight: 800;
    height: 50px;
    width:220px;
     display: inline-block;
    line-height: 50px;
}

.classify p{
    display: inline-block;
   
}

.ximu{
    width: 4000px;
   
    /* width:100%; */
}
#more2{
  background: #fff;
}
.classify p:last-child{
     color: #277F7B;
    width: 150px; line-height: 50px;float: right;cursor: pointer;
}
.classify>p> span{
    display: inline-block;
    padding: 3px 10px;
    /* background: #277F7B; */
    margin: 10px 0;
}
.classify p span:hover{
     background: #277F7B;
     color: #fff;
}
.el-button:visited{
    background: #277F7B;color: #fff;
}
.el-button:hover{
color:  #6ac7c2;
border-color: #6ac7c2;;
}

</style>